<html>
<meta charset="utf-8" />
<title>WebSocket Chat</title>
<script language="javascript" type="text/javascript">
  var wsUri = "ws://121.42.12.244:9001/";
  var output = document.getElementById("output"); 
  var ws = null;

  function OnConnect(user) {
    wsUri = document.getElementById("url").value;
    openWebSocket(user); 
  }

  function openWebSocket(user) {
    if (ws != null)
        ws.close();
    ws = new WebSocket(wsUri);
    ws.onmessage = function (evt) { onMessage(evt); };
    ws.onopen = function (evt) { onOpen(evt, user); };
    ws.onclose = function (evt) { onClose(evt); };
    ws.onerror = function (evt) { onError(evt); };
  }

  function onMessage(evt) {
    var data = evt.data + "<br>" + document.getElementById('result').innerHTML;
    document.getElementById('result').innerHTML = data;
  }

  function onOpen(evt, user) {
//    writeToScreen("CONNECTED");
  }

  function onClose(evt) {
 //   writeToScreen("DISCONNECTED");
  }

  function onError(evt) {
    writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
  }

  function doLogin(user) {
    var user = document.getElementById(user).value;
    message = "login|" + user;
    ws.send(message);
  }

  function doSend(to, msgid) {
    var to_user = document.getElementById(to).value;
    var msg = document.getElementById(msgid).value;
    message = "chat|" + msg + "|" + to_user;
    ws.send(message);
  }

  function doClear(result) {
    document.getElementById(result).innerHTML = "";
  }

  function writeToScreen(message) {
    var pre = document.createElement("p");
    pre.style.wordWrap = "break-word";
    pre.innerHTML = message;
    output.insertBefore(pre);
  }
 
</script>
<body>

<fieldset style="width:530px;">
<legend>WebSocket</legend>
    <p><span>Server url:</span>
      <input id="url" type="text"  value="ws://121.42.12.244:9001/" />
      <input type="button" value="Connect" onclick="OnConnect('user');" />
    </p>
    <p>
      me: <input id="user" type="text" value="user" />
      <input type="button" value="login" onclick="doLogin('user');" />
    </p>
    <p>
      to: &nbsp;&nbsp;<input id="to_user" type="text" value="user" />
      &nbsp;&nbsp;
      msg: <input type=text id="msg" value="hello world!" />
      <input type="button" value="send" onclick="doSend('to_user', 'msg');" />
      <input type="button" value="clear" onclick="doClear('result');" />
    </p>
    recv:
    <fieldset style="width:500px;height:80px; overflow:auto;">
      <div id="result"></div>
    </fieldset>
</fieldset>

<div id="output"> </div>
</body>
</html>
